
<template>
  <div id="login">
    <div class="student-content">
      <div class="login-cont">
        <div class="login-title">欢迎登录校园教学管理系统</div>
        <div class="student-user">
          <p>ID</p>
          <el-input clearable v-model="id" class="input-flex" placeholder="请输入id"></el-input>
        </div>
        <div class="student-user">
          <p>密码</p>
          <el-input v-model="password" show-password class="input-flex" placeholder="请输入密码"></el-input>
        </div>
        <!--   登录或注册的提交     -->
        <el-button  @click="handleLogin" type="success" class="register-btn">登录</el-button>
        <div style="display: flex">
          <div>还没有账号？请<span style="color: #409EFF;cursor: pointer" @click="$router.push('/register')">注册</span></div>
          <div style="flex: 1;text-align: right;color: #409EFF;cursor: pointer" @click="$router.push('/reset')">忘记密码</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage,ElMessageBox} from "element-plus";
export default {
  name: "login",
  data(){
    return{
      id:'',
      password:''
    }
  },
  methods:{
    handleLogin(){
      axios.get('http://localhost:8080/login',{
        params:{
          id:this.id,
          password:this.password
        }
      }).then(res=>{
        console.log(res.data);
        if(res.data.code==='200'&& res.data.data===1){
          ElMessage({
            type: 'success',
            message: '登录成功',
          });
          localStorage.setItem('user',JSON.stringify(res.data));
          this.$router.push('/admin/student');
        }else if(res.data.code==='200'&& res.data.data===2){
          ElMessage({
            type: 'success',
            message: '登录成功',
          });
          localStorage.setItem('user',JSON.stringify(res.data));
          this.$router.push(`/teacher/home?id=${this.id}`);
        }else if(res.data.code==='200'&& res.data.data===3){
          ElMessage({
            type: 'success',
            message: '登录成功',
          });
          localStorage.setItem('user',JSON.stringify(res.data));
          this.$router.push(`/student/home?id=${this.id}`);
        }
        else{
          ElMessage({
            type: 'error',
            message: "请输入正确的用户名与密码",
          });
        }
      })
    }
  }
}
</script>
<style scoped>
#login{
  background-image: url(src/assets/background.png) ;
  background-attachment: fixed ;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
}
.student-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
}
.login-cont{
  width: 600px;
  height: 350px;
  background-color: white;
  border-radius: 10px;
  opacity: 0.9;
}
.login-title{
  text-align: center;
  color: #000000;
  font-size: 30px;
  padding-top: 30px;
  font-family: Arial,Helvetica,sans-serif;
}
.student-user{
  width: 400px;
  margin: 0 auto;
  padding-top: 30px;
  height: 40px;
  display: flex;
  align-items: center;
}
.student-user p{
  width: 50px;
  color: #000000;
  font-size: 16px;
}
.input-flex{
  flex: 1;
}
.register-btn{
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0 auto;
  font-size: 16px;
}
</style>